@use '../../../components/variables';

$block: '.#{variables.$ns}color-info-popup';

#{$block} {
    min-width: 300px;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    padding: var(--g-spacing-3);

    &__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-block-end: var(--g-spacing-3);
        gap: var(--g-spacing-2);
    }

    &__color-preview {
        width: var(--g-spacing-6);
        height: var(--g-spacing-6);
        border-radius: var(--g-border-radius-m);
        border: 1px solid var(--g-color-line-generic);
        flex-shrink: 0;
    }

    &__info-section {
        display: flex;
        flex-direction: column;
        gap: var(--g-spacing-2);
        margin-block-end: var(--g-spacing-3);
    }

    &__info-row {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    &__label {
        font-weight: var(--g-text-accent-font-weight);
    }

    &__value-container {
        display: flex;
        align-items: center;
        gap: var(--g-spacing-1);
        background-color: var(--g-color-base-generic);
        padding: var(--g-spacing-1) var(--g-spacing-2);
        border-radius: var(--g-border-radius-xs);
        border: 1px solid var(--g-color-line-generic);
    }

    &__value {
        flex: 1;
        word-break: break-all;
        font-family: var(--g-text-code-font-family);
        font-size: var(--g-text-code-1-font-size);
        line-height: var(--g-text-code-1-line-height);
    }

    &__details {
        padding-block-start: var(--g-spacing-2);
        border-block-start: 1px solid var(--g-color-line-generic);
        display: flex;
        flex-direction: column;
        gap: var(--g-spacing-1);
    }
}
